<template>
    <div class="main">
            <div class="swiper-main-box">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./image/banner3-1831543774623301632.jpg" alt="slide1">
                      </div>
                      <div class="swiper-slide">
                        <img src="./image/lQLPJwQ-scFrqrjNAZDNB4Cw2Qnww1CVjTsDuY02aYAOAQ_1920_400-1613080152839815168.png" alt="slide1">
                      </div>
                      <div class="swiper-slide">
                        <img src="./image/lQLPJxPNXyafSVjNAZDNB4Cwse199X33-z8DtwRx8AAFAA_1920_400-1612724980137590784.png" alt="slide1">
                      </div>
                      <div class="swiper-slide">
                        <img src="./image/影视后期课程_pc轮播-1319227056260644864.png" alt="slide1">
                      </div>
                      <div class="swiper-slide">
                        <img src="./image/4-1245893706096050176.jpg" alt="slide1">
                      </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        <div class="vip-box">
            <img src="" alt="">
            <span>仅需198即可观看所有付费课程</span>
            <button>开通VIP</button>
        </div>
        <div class="course-live-online-container">
            <div class="online-left" style="box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);border-radius: 20px;">
                <div class="first-line">
                    <div class="title-box">
                        <img src="" alt="">
                        <span class="one">直播课程</span>
                        <span class="two">互联网大佬在线直播</span>
                    </div>
                    <div class="live-next-last-box">
                        <img src="" alt="">
                        <img src="" alt="">
                    </div>
                </div>
                <div class="ant-row">
                    <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                            </div>
                            <span> 求职技巧之重难点问题剖析与解决 </span>
                            <div class="end-box">
                                <i class="anticon-check-circle" style="margin-right: 3px;">
                                    <svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                        <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                    </svg>
                                </i>
                                直播结束 
                            </div>
                        </div>
                    </div>
                    <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img src="./image/直播封面-1254953535796150272.png" alt="">
                            </div>
                            <span>  IT开发编程方向之职业规划  </span>
                            <div class="end-box">
                                <i class="anticon-check-circle" style="margin-right: 3px;">
                                    <svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                        <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                    </svg>
                                </i>
                                直播结束 
                            </div>
                        </div>
                    </div>
                    <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/123-1252130152859566080.png" alt="">
                            </div>
                            <span>   研究生复试之高效准备简历的方法  </span>
                            <div class="end-box">
                                <i class="anticon-check-circle" style="margin-right: 3px;">
                                    <svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                        <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                    </svg>
                                </i>
                                直播结束 
                            </div>
                        </div>
                    </div>
                     <div class="ant-col-12" style="padding-left: 10px; padding-right: 10px;">
                        <div class="live-content-box">
                            <div class="hover-img-scale-box">
                                <img src="./image/数据结构与算法+基础篇+拷贝-1252123020651134976.jpg" alt="">
                            </div>
                            <span>  十大经典排序之Part-6-完结篇  </span>
                            <div class="end-box">
                                <i class="anticon-check-circle" style="margin-right: 3px;">
                                    <svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
                                        <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                    </svg>
                                </i>
                                直播结束 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="online-right" style="box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);border-radius: 20px;">
                <div class="title-box">
                    <img src="" alt="">
                    <span class="three">课程榜单</span>
                    <span class="four">以购买、学习相关数据为依据～每日更新</span>
                </div>
                <div class="content-box">
                    <img src="https://course.myhope365.com/img/bestseller-list.23c00d98.png" alt="">
                    <div class="course-box">
                        <div class="data-v-3030c6dc">
                            <div class="left-num" style="background-color: rgb(252, 139, 51);">NO.1</div>
                            <div class="hover-img-scale-box">
                                <img src="./image/求职成功之道与术_1-1227885610962780160.jpg" alt="">
                            </div>
                            <div class="title-price-box">
                                <span class="five"> 求职成功之道与术 </span>
                                <span class="six"> ¥800 </span>
                                <p class="seven"> 652 人报名 </p>
                            </div>
                        </div>
                        <div class="data-v-3030c6dc">
                            <div class="left-num" style="background-color: rgb(193, 182, 177);">NO.2</div>
                            <div class="hover-img-scale-box">
                                <img src="./image/毕业设计_宣传图-1206867183058026496.png" alt="">
                            </div>
                            <div class="title-price-box">
                                <span class="five">  毕设从小白到老司机修成记  </span>
                                <span class="six">  ¥1000  </span>
                                <p class="seven">  632 人报名 </p>
                            </div>
                        </div>
                        <div class="data-v-3030c6dc">
                            <div class="left-num" style="background-color: rgb(235, 77, 134);">NO.3</div>
                            <div class="hover-img-scale-box">
                                <img src="./image/hadoopcore从入门到实战-1421990960866263040.jpg" alt="">
                            </div>
                            <div class="title-price-box">
                                <span class="five"> hadoopcore从入门到实战-v2021版  </span>
                                <span class="six"> ¥1000 </span>
                                <p class="seven">  131 人报名  </p>
                            </div>
                        </div>
                    </div>
                    <button class="change-box">换一换</button>
                </div>
            </div>
        </div>
        <CourseView></CourseView>
        <div class="qq-list">
            <div data-v-7d0e4f54>
                <div data-v-7d0e4f54>
                    <div data-v-7d0e4f54 id="img0" class="pc-qq-item">
                        <div data-v-7d0e4f54 class="pc-qq-item-phone">
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneTitle">联系客服</div>
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneNumber">
                                <i data-v-7d0e4f54 aria-label="icon: qq" class="anticon anticon-qq">
                                    <svg viewBox="64 64 896 896" data-icon="qq" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"></path></svg>
                                </i> 805544861 
                            </div>
                        </div>
                        <img data-v-7d0e4f54 src="" alt="">
                        <div data-v-7d0e4f54>客服1</div>
                    </div>
                </div>
                <div data-v-7d0e4f54>
                    <div data-v-7d0e4f54 id="img1" class="pc-qq-item">
                        <div data-v-7d0e4f54 class="pc-qq-item-phone">
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneTitle">联系客服</div>
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneNumber">
                                <i data-v-7d0e4f54 aria-label="icon: phone" class="anticon anticon-phone">
                                    <svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path></svg>
                                </i> 18833103577 </div>
                            </div>
                            <i data-v-7d0e4f54 aria-label="icon: phone" class="phoneIcon anticon anticon-phone"><svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path></svg>
                            </i>
                            <div data-v-7d0e4f54>客服2</div>
                        </div>
                    </div>
                <div data-v-7d0e4f54>
                    <div data-v-7d0e4f54 id="img2" class="pc-qq-item">
                        <div data-v-7d0e4f54 class="pc-qq-item-phone">
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneTitle">技术支持</div>
                            <div data-v-7d0e4f54 class="pc-qq-item-phoneNumber">
                                <i data-v-7d0e4f54 aria-label="icon: phone" class="anticon anticon-phone">
                                    <svg viewBox="64 64 896 896" data-icon="phone" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M877.1 238.7L770.6 132.3c-13-13-30.4-20.3-48.8-20.3s-35.8 7.2-48.8 20.3L558.3 246.8c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l89.6 89.7a405.46 405.46 0 0 1-86.4 127.3c-36.7 36.9-79.6 66-127.2 86.6l-89.6-89.7c-13-13-30.4-20.3-48.8-20.3a68.2 68.2 0 0 0-48.8 20.3L132.3 673c-13 13-20.3 30.5-20.3 48.9 0 18.5 7.2 35.8 20.3 48.9l106.4 106.4c22.2 22.2 52.8 34.9 84.2 34.9 6.5 0 12.8-.5 19.2-1.6 132.4-21.8 263.8-92.3 369.9-198.3C818 606 888.4 474.6 910.4 342.1c6.3-37.6-6.3-76.3-33.3-103.4zm-37.6 91.5c-19.5 117.9-82.9 235.5-178.4 331s-213 158.9-330.9 178.4c-14.8 2.5-30-2.5-40.8-13.2L184.9 721.9 295.7 611l119.8 120 .9.9 21.6-8a481.29 481.29 0 0 0 285.7-285.8l8-21.6-120.8-120.7 110.8-110.9 104.5 104.5c10.8 10.8 15.8 26 13.3 40.8z"></path></svg>
                                </i> 15733157255 </div>
                            </div>
                            <img data-v-7d0e4f54 src="" alt="">
                            <div data-v-7d0e4f54 style="width: 40px;">技术支持</div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
  </template>
  <script>
  import CourseView from './CourseView.vue';
  /* global Swiper */
  export default {
    name: 'MainView',
    components: { CourseView }, 
    props: {
      msg: String
    },
    mounted() {
        new Swiper('.swiper-main-box', {
          loop: true,
          pagination: {
              el: '.swiper-pagination', 
          },
          navigation: {
              nextEl: '.swiper-button-next', 
              prevEl: '.swiper-button-prev', 
          },
          autoplay: {
            delay: 2000, 
            disableOnInteraction: false,
        },
        spaceBetween: 20,
      });
    }
  }
  </script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  .main {
    width: 1160px;
    height: 2545px;
    margin: 0 auto;

}
.main > .swiper-main-box {
    width: 1132px;
    height: 432px;
    margin: -125px auto 0;
    overflow: hidden; 
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
}
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
}
.swiper-button-next {
    right: 20px;
    margin-right: 142px;
    margin-top: 100px !important;
}
.swiper-button-prev {
    left: 20px;
    margin-left: 146px;
    margin-top: 100px !important;
}
.swiper-pagination {
    position: absolute;
    bottom: 50px;
    left: 48%;
    transform: translateX(-50%);
    z-index: 10; 
}
.swiper-pagination-bullet {
    margin: 0 3px !important;
}
.main > .swiper-main-box >.swiper-wrapper >.swiper-slide {
    width: 1000px;
    height: 432px;
}
.main > .swiper-main-box >.swiper-wrapper >.swiper-slide > img{
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.main > .vip-box {
    margin-top: 22px;
    height: 50px;
    background: url(https://course.myhope365.com/img/vip-line.f590fe35.png);
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 30px;
}
.main > .vip-box > img {
    width: 30px;
    margin-right: 8px;
    border: 0;
    vertical-align: middle;
    overflow-clip-margin: content-box;
    overflow: clip;
}
.main >.vip-box > span {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
}
.main > .vip-box > button {
    margin-left: 3%;
    width: 72px;
    height: 26px;
    background: #6e421a;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
    border-radius: 18px;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.main > .course-live-online-container {
    width: 1160px;
    height: 663px;
}
.main >.course-live-online-container > .online-left {
    width: 660px;
    height: 603px;
    padding: 30px 20px;
    float: left;
}
.main >.course-live-online-container >.online-left > .first-line {
    width: 630px;
    height: 39px;
    display: flex;
}
.main >.course-live-online-container >.online-left >.ant-row {
    width: 630px;
    height: 564px;
}
.main >.course-live-online-container >.online-left > .first-line > .title-box {
    width: 300px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.main >.course-live-online-container >.online-left > .first-line > .title-box > img {
    width: 38px;
    border: 0;
    vertical-align: middle;
    overflow-clip-margin: content-box;
    overflow: clip;
}
.main >.course-live-online-container >.online-left > .first-line > .title-box > .one {
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    font-size: 26px;
    color: #333;
}
.main >.course-live-online-container >.online-left > .first-line > .title-box > .two {
    margin-top: auto;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #9f9f9f;
}
.main >.course-live-online-container >.online-left > .first-line > .live-next-last-box {
    width: 50px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    display: flex;
    margin-left: 260px;
}
.main >.course-live-online-container >.online-left > .first-line > .live-next-last-box > img {
   width: 20px;
   cursor: pointer;
   border: 0;
   vertical-align: middle;
   overflow-clip-margin: content-box;
   overflow: clip; 
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 {
    display: block;
    box-sizing: border-box;
    width: 50%;
    -webkit-box-flex: 0;
    float: left;
    position: relative;
    min-height: 1px;
    height: 245px;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box {
   border-radius: 10px;
   box-shadow : 0 4px 10px 0 rgba(0,0,0,.15);
   margin-top: 20px;
   cursor: pointer;
   height: 220px;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box > .hover-img-scale-box {
    margin-left: 0;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    font-family: PingFangSC-Medium, PingFang SC;
    height: 150px;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box > .hover-img-scale-box > img {
   border: 0;
   vertical-align: middle;
   width: 100%;
   height: 150px;
   transition: all .6s ease;
   overflow-clip-margin: content-box;
   overflow: clip;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box > span {
    padding: 15px 0 6px 0;
    font-weight: 600;
    color: #333;
    margin-left: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .15);
    font-family: PingFangSC-Medium, PingFang SC;
    font-size: 14px;
    display: block;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box > .end-box {
    color: #bac2c2;
    margin-left: 20px;
}
.main >.course-live-online-container >.online-left > .ant-row > .ant-col-12 > .live-content-box > .end-box > .anticon-check-circle {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
} 
.main >.course-live-online-container >.online-right {
    width: 484px;
    height: 603px;
    padding: 30px 20px;
    float: right;
}
.main >.course-live-online-container >.online-right > .title-box {
    -webkit-box-pack: start;
    justify-content: start;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 434px;
    height: 39px;
}
.main >.course-live-online-container >.online-right > .content-box {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-top: 20px;
    height: 470px;
    background: #fff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
    border-radius: 20px;
    padding: 20px;
}
.main >.course-live-online-container >.online-right > .title-box > img{
    overflow-clip-margin: content-box;
    overflow: clip;
    margin-right: 12px;
    width: 38px;
    border: 0;
    vertical-align: middle;
}
.main >.course-live-online-container >.online-right > .title-box > .three {
    margin-right: 12px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    font-size: 26px;
    color: #333;
}
.main >.course-live-online-container >.online-right > .title-box > .four {
    margin-top: auto;
    margin-bottom: 5px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #9f9f9f;
}
.main >.course-live-online-container >.online-right > .content-box > img {
    margin-top: -40px;
    width: 140px;
    border: 0;
    vertical-align: middle;
    overflow-clip-margin: content-box;
    overflow: clip;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box {
    margin-top: 10px;
    width: 100%;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc {
    width: 100%;
    display: flex;
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
    height: 100px;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .left-num {
    width: 43px;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    border-radius: 10px 0 20px 0;
    color: #fff;
    font-size: 12px;
    padding-top: 0;
    z-index: 401;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .hover-img-scale-box {
    overflow: hidden;
    border-radius: 10px;
    margin-right: 12px;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .hover-img-scale-box > img {
    width: 170px;
    height: 100%;
    border-radius: 10px;
    transition: all .6s ease;
    border: 0;
    vertical-align: middle;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .title-price-box {
    padding-top: 5px;
    height: 100px;
} 
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .title-price-box > .five {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    height: 39px;
    margin-bottom: 5px;
    color: #4e5054;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .title-price-box > .six {
    color: #f32425;
    font-size: 20px;
    font-weight: 600;
}
.main >.course-live-online-container >.online-right > .content-box > .course-box > .data-v-3030c6dc > .title-price-box > .seven {
    font-weight: 500;
    color: #b7bbc4;
}
.main >.course-live-online-container >.online-right > .content-box > .change-box {
    margin-top: -10px;
    width: 108px;
    height: 29px;
    background: linear-gradient(90deg, #fd952d, #f1534b);
    border-radius: 15px;
    color: #fff;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
.qq-list {
    list-style: none;
    position: fixed;
    bottom: 35vh;
    right: 20px;
    z-index: 888;
}
.qq-list>div[data-v-7d0e4f54]:first-child {
    border-radius: 5px 5px 0 0;
}
.pc-qq-item[data-v-7d0e4f54] {
    background-color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    line-height: 15px;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    color: #01ac74;
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
    position: relative;
}
.pc-qq-item-phone[data-v-7d0e4f54] {
    display: none;
    width: 170px;
    position: absolute;
    right: 55px;
    top: -2px;
    background-color: #fff;
    border-radius: 8px;
    padding: 8px 5px;
    box-shadow: 0 .1vw .5vw 0 rgba(0, 0, 0, .09);
}
.pc-qq-item[data-v-7d0e4f54] {
    text-align: center;
    line-height: 15px;
    color: #01ac74;
}
.pc-qq-item[data-v-7d0e4f54] > div[data-v-7d0e4f54] {
    display: none;
}
.pc-qq-item[data-v-7d0e4f54] > img[data-v-7d0e4f54]:hover {
    display: none;
}
.pc-qq-item[data-v-7d0e4f54] > img[data-v-7d0e4f54]:hover + div[data-v-7d0e4f54] {
    display: block;
    color: green;
}
.pc-qq-item[data-v-7d0e4f54] > div[data-v-7d0e4f54]:last-child {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.pc-qq-item[data-v-7d0e4f54] > i[data-v-7d0e4f54] {
    transition: opacity 0.5s ease;
}
.pc-qq-item[data-v-7d0e4f54] > i[data-v-7d0e4f54]:hover {
    opacity: 0;
    visibility: hidden;
}
.pc-qq-item[data-v-7d0e4f54] > i[data-v-7d0e4f54]:hover ~ div[data-v-7d0e4f54]:last-child {
    display: block;
    opacity: 1;
    visibility: visible;
    color: green;
}
.pc-qq-item[data-v-7d0e4f54] > img[data-v-7d0e4f54] {
    display: block;
}

.pc-qq-item[data-v-7d0e4f54] > div[data-v-7d0e4f54] {
    display: none;
}

.pc-qq-item[data-v-7d0e4f54]:hover > img[data-v-7d0e4f54] {
    display: none;
}

.pc-qq-item[data-v-7d0e4f54]:hover > div[data-v-7d0e4f54] {
    display: block;
    color: green;
}
  </style>
  